<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统管理员</title>
		<link rel="stylesheet" type="text/css" href="css/qingjia.css">
		<link rel="stylesheet" type="text/css" href="css/admin.css">
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		
		<div id="container">
			<div id="menu">
				
				<div class="menu-level-0"><a href="admin.html">给用户分配角色</div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配角色的用户</a></div>
				<div class="menu-level-1"><a href="admin.html">给用户分配班级</a></div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配班级的用户</a></div>
				<div class="menu-level-1"><a href="admin.html">给班级分配老师</a></div>
				<div class="menu-level-1"><a href="admin-yifenpeijuese.html">已分配老师的班级</a></div>
			</div>
			
			<div id="qingjia">
				
				<div id="qingjia-left">
					<!-- qingjia-left -->
				</div>
				<div id="qingjia-right">
					<!-- qingjia-right -->
					<div id="qingjia-right-top">
						<!-- qingjia-right-top -->
						
						<div id="qingjia-right-top-top">
							给用户分配角色
						</div>
						<div id="qingjia-right-top-bottom">
							
							<table class="fenpeijuese" id="main" >
								<tr>
									<td>ID</td>
									<td noWrap>姓名</td>
									<td>手机号码</td>
									<td>可分配角色</td>
									<td>操作</td>
								</tr>
								<tr v-for="user in userList">
									<td><span>{{user.userId}}</span></td>
									<td noWrap>{{user.userName}}</td>
									<td>{{user.phone}}</td>
									<td>
										<select class="admin-select" @change="changeProduct($event)">
											<option>请选择--</option>
											<option v-bind:id="role.id" :value="role.id" v-for="role in roleList" >{{role.name}}</option>
										</select>
									</td>
									<td>
										<input class="fenpei" type="button" value="分配角色" v-on:click="add(user.userId)"/>
									</td>
								</tr>
								<tr>
									<td colspan="5"><input type="button" v-on:click="jump" value="查看已分配角色"/></td>
								</tr>
							</table>
						</div>
						
					</div>
					
				</div>
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var vue = new Vue({
				el: '#main',
				data: {
					userList:[],
					roleList:[],
					roleId:'',
					userId:''
				},
				methods: {
					getRole() {
						axios.get('http://localhost:8080/kaoqin/userRole/findAll.do').then(
							function(backdatas) {
								var datas = backdatas.data;
								vue.roleList = datas.roleBeans;
								vue.userList = datas.userRoleBeans;
							})
					},
					
					add(id){
						console.log(id)
						console.log(this.roleId)
						var userId=id
						var id=this.roleId
						var roleId=parseInt(id);
						var datas={
							'roleId':roleId,
							'userId':userId
						}
						 var url='http://localhost:8080/kaoqin/userRole/add.do'
						 axios.post(url,datas).then(function(backdatas){
						 	location.reload();
						 })
					},
					changeProduct(event) {
					             var rs = event.target.value; //获取option对应的value值
					             vue.roleId=rs
					           },
					jump(){
						window.location.href="admin-yifenpeijuese.html";
					},
					
					deleterole(){
						var ids=vue.cData
						var datas={
							'ids':ids,
							method:'delete'
						}
						var url='http://localhost:8080/attendance-service/wwx/post'
						axios.post(url,datas).then(function(backdatas){
							var flag=backdatas.data.code==200;
							console.log(flag);
							if(flag){
							location.reload();
							}else{ 
								var arry=backdatas.data;
								var s='';
								for (i = 0; i < arry.length; i++) {
								  var roleid=arry[i];
								  console.log(roleid);
								  s=s+roleid+'   ';
								}
								console.log(s+'无法删除');
							}
						})
					}
				},
			});
			vue.getRole();
		}
	</script>
</html>
